// 消息队列，管理消息的展示
import { Notification, Button } from '@arco-design/web-vue'
import noticeIcon from '../../../assets/notice.png'
import { isInfoPermission, toInfoDetail } from '@/hooks/useInfoPermission'
import usePermissionStore from '@/store/modules/permission'
import { readMsg } from '@/api/common'
import useUserStore from '@/store/modules/user'

export default class {
  /**
   * @param await_queue 消息待发送队列
   * @param playing_queue 消息发送中队列
   * @param config 配置
   */
  constructor(router) {
    // 初始化
    this.await_queue = []
    this.playing_queue = []
    this.config = {
      duration: 10000, // 信息展示时长
      playing_max: 4, // 同时最大展示个数
      closable: true, // 关闭开关
    }
    // useHook
    this.router = router
    // const { isInfoPermission, toInfoDetail } = useInfoPermission(router)
    this.userStore = useUserStore()
  }

  // 连接websocket | Connect websocket
  enqueue(item) {
    // 1业务通知，2系统消息
    const { needAlert } = item
    // 业务通知,并且是需要弹框的推入到待发送消息queue
    if (needAlert == 1) {
      this.await_queue.push(item)
      this.emitPlayer()
    }
  }
  emitPlayer() {
    // 可发送消息数
    let sendableCount = this.config.playing_max - this.playing_queue.length
    let sendList = this.await_queue.splice(0, sendableCount)
    for (let index = 0; index < sendList.length; index++) {
      const notice = sendList[index]
      // 移除待发送此项
      this.await_queue.splice(index, 1)
      // 展示中的增加此项
      this.playing_queue.push(notice.id)

      const contentFix = notice.content.replaceAll('\n', '<br>')
      const btn_permission = isInfoPermission(notice)
      const { resourcePermission } = usePermissionStore()
      const is_permission = btn_permission && resourcePermission.includes(btn_permission)
      // 系统更新==3，长显
      const notice_duration = notice.noticeType == 3 ? 9999999000 : this.config.duration
      Notification.info({
        id: notice.id,
        title: (
          <span>
            <img src={noticeIcon} className="notice_icon" />
            {notice.title}
          </span>
        ),
        content: <span className="notice_cont" v-html={contentFix}></span>,
        footer:
          is_permission && notice.type !== 9 && notice.type !== 10 ? (
            <Button
              v-permission={btn_permission}
              type="primary"
              size="small"
              style="{margin-top: -20px}"
              onClick={() =>
                toInfoDetail(this.router, notice, () => {
                  // 已读、更新未读消息数量
                  readMsg({ id: notice.id }).then(() => {
                    this.userStore.updateUnreadMsgCount()
                  })
                })
              }
            >
              查看详情
            </Button>
          ) : null,
        showIcon: false,
        duration: notice_duration,
        closable: this.config.closable,
        style: { width: '360px' },
        onClose: (id) => {
          const index = this.playing_queue.findIndex((it) => it == id)
          this.playing_queue.splice(index, 1)
          setTimeout(() => {
            this.emitPlayer()
          }, 1000)
        },
      })
      // 移除
    }
  }
}
